<template>
  <div>
    <div class="page-title">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: 'index' }"
          >问题列表</el-breadcrumb-item
        >
        <el-breadcrumb-item>验证详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 卡片视图区 -->
    <el-card>
      <div class="page-content">
        <el-form :model="updataForm" :rules="rules" ref="updataForm">
          <el-row>
            <el-col :span="12">
              <el-form-item label="检查人：">{{
                hseProblemForm.checkerName
              }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="受检二级单位：">{{
                hseProblemForm.parentCompanyName
              }}</el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="受检基层单位：">{{
                hseProblemForm.basicCompanyName
              }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="作业队号：">{{
                hseProblemForm.operationTeamName
              }}</el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="轮次：">{{
                hseProblemForm.round
              }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="审核时间：">{{
                hseProblemForm.auditTime
              }}</el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="审核主题：">{{
                hseProblemForm.auditSubject
              }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="审核项：">{{
                hseProblemForm.auditItem
              }}</el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="审核内容：">{{
                hseProblemForm.auditContent
              }}</el-form-item>
            </el-col>
          </el-row>
          <!-- <el-row>
                    <el-col>
                        <el-form-item label="评分项：">{{hseProblemForm.scoringItems}}</el-form-item>
                    </el-col>
                </el-row> -->
          <el-row>
            <el-col>
              <el-form-item label="判定依据：">{{
                hseProblemForm.judgmentBasis
              }}</el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="问题级别：">{{
                hseProblemForm.questionLevel
              }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="原因分析：">{{
                hseProblemForm.causeAnalysis
              }}</el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="隐患级别：">{{
                hseProblemForm.problemLevel
              }}</el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="审核类别：">{{
                hseProblemForm.classify
              }}</el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="整改建议：">{{
                hseProblemForm.rectificationSuggestions
              }}</el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="责任人：">{{
                hseProblemForm.responsePersonName
              }}</el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="整改责任人：">{{
                hseProblemForm.rectPersonName
              }}</el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="扣分：">{{
                hseProblemForm.lostScore
              }}</el-form-item>
            </el-col>
          </el-row>

          <!-- 检查内容 -->
          <el-row>
            <el-col :span="12">
              <el-form-item label="检查图片1： ">
                <el-card
                  :body-style="{ padding: '10px' }"
                  style="height: 251px; width: 90%"
                >
                  <el-popover placement="right" title="" trigger="click">
                    <div style="max-width: 600px; height: auto">
                      <img
                        :src="hseProblemForm.checkAttach1"
                        style="max-width: 600px; height: auto"
                      />
                    </div>
                    <img
                      slot="reference"
                      :src="hseProblemForm.checkAttach1"
                      :alt="hseProblemForm.checkAttach1"
                      style="max-height: 200px"
                    />
                  </el-popover>
                </el-card>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="检查图片2：">
                <el-card
                  :body-style="{ padding: '10px' }"
                  style="height: 251px; width: 90%"
                >
                  <el-popover placement="center" title="" trigger="click">
                    <div style="max-width: 600px; height: auto">
                      <img
                        :src="hseProblemForm.checkAttach2"
                        style="max-width: 600px; height: auto"
                      />
                    </div>
                    <img
                      slot="reference"
                      :src="hseProblemForm.checkAttach2"
                      :alt="hseProblemForm.checkAttach2"
                      style="max-height: 200px"
                    />
                  </el-popover>
                </el-card>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="检查图片3： ">
                <el-card
                  :body-style="{ padding: '10px' }"
                  style="height: 251px; width: 90%"
                >
                  <el-popover placement="right" title="" trigger="click">
                    <div style="max-width: 600px; height: auto">
                      <img
                        :src="hseProblemForm.checkAttach3"
                        style="max-width: 600px; height: auto"
                      />
                    </div>
                    <img
                      slot="reference"
                      :src="hseProblemForm.checkAttach3"
                      :alt="hseProblemForm.checkAttach3"
                      style="max-height: 200px"
                    />
                  </el-popover>
                </el-card>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="检查图片4：">
                <el-card
                  :body-style="{ padding: '10px' }"
                  style="height: 251px; width: 90%"
                >
                  <el-popover placement="center" title="" trigger="click">
                    <div style="max-width: 600px; height: auto">
                      <img
                        :src="hseProblemForm.checkAttach4"
                        style="max-width: 600px; height: auto"
                      />
                    </div>
                    <img
                      slot="reference"
                      :src="hseProblemForm.checkAttach4"
                      :alt="hseProblemForm.checkAttach4"
                      style="max-height: 200px"
                    />
                  </el-popover>
                </el-card>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="检查视频：">
                <el-card
                  v-model="hseProblemForm.checkVideo"
                  :show-file-list="false"
                  accept=".mp4,.qlv,.qsv,.ogg,.flv,.avi,.wmv,.rmvb"
                  :headers="{ Authorization: currentUser.token }"
                  style="height: 251px; width: 90%"
                >
                  <video
                    v-if="
                      hseProblemForm.checkVideo != '' && videoFlag1 == false
                    "
                    :src="hseProblemForm.checkVideo"
                    class="avatar video-avatar"
                    controls="controls"
                  >
                    您的浏览器不支持视频播放
                  </video>
                  <i
                    v-if="
                      hseProblemForm.checkVideo == '' && videoFlag1 == false
                    "
                  ></i>
                </el-card>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 整改内容 -->
          <el-divider>整改内容</el-divider>
          <el-row style="padding-bottom: 5px">
            <font style="font-size: 15px; font-weight: bold">问题整改</font>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="是否评判教育：" style="height: 20px">{{
                hseProblemForm.education
              }}</el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="整改图片1： ">
                <el-card
                  :body-style="{ padding: '10px' }"
                  style="height: 251px; width: 90%"
                >
                  <el-popover placement="right" title="" trigger="click">
                    <div style="max-width: 600px; height: auto">
                      <img
                        :src="hseProblemForm.rectAttach1"
                        style="max-width: 600px; height: auto"
                      />
                    </div>
                    <img
                      slot="reference"
                      :src="hseProblemForm.rectAttach1"
                      :alt="hseProblemForm.rectAttach1"
                      style="max-height: 200px"
                    />
                  </el-popover>
                </el-card>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="整改图片2： ">
                <el-card
                  :body-style="{ padding: '10px' }"
                  style="height: 251px; width: 90%"
                >
                  <el-popover placement="right" title="" trigger="click">
                    <div style="max-width: 600px; height: auto">
                      <img
                        :src="hseProblemForm.rectAttach2"
                        style="max-width: 600px; height: auto"
                      />
                    </div>
                    <img
                      slot="reference"
                      :src="hseProblemForm.rectAttach2"
                      :alt="hseProblemForm.rectAttach2"
                      style="max-height: 200px"
                    />
                  </el-popover>
                </el-card>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="整改图片3： ">
                <el-card
                  :body-style="{ padding: '10px' }"
                  style="height: 251px; width: 90%"
                >
                  <el-popover placement="right" title="" trigger="click">
                    <div style="max-width: 600px; height: auto">
                      <img
                        :src="hseProblemForm.rectAttach3"
                        style="max-width: 600px; height: auto"
                      />
                    </div>
                    <img
                      slot="reference"
                      :src="hseProblemForm.rectAttach3"
                      :alt="hseProblemForm.rectAttach3"
                      style="max-height: 200px"
                    />
                  </el-popover>
                </el-card>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="整改图片4： ">
                <el-card
                  :body-style="{ padding: '10px' }"
                  style="height: 251px; width: 90%"
                >
                  <el-popover placement="right" title="" trigger="click">
                    <div style="max-width: 600px; height: auto">
                      <img
                        :src="hseProblemForm.rectAttach4"
                        style="max-width: 600px; height: auto"
                      />
                    </div>
                    <img
                      slot="reference"
                      :src="hseProblemForm.rectAttach4"
                      :alt="hseProblemForm.rectAttach4"
                      style="max-height: 200px"
                    />
                  </el-popover>
                </el-card>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="整改视频：">
                <el-card
                  v-model="hseProblemForm.rectVideo"
                  :show-file-list="false"
                  accept=".mp4,.qlv,.qsv,.ogg,.flv,.avi,.wmv,.rmvb"
                  :headers="{ Authorization: currentUser.token }"
                  style="height: 251px; width: 90%"
                >
                  <video
                    v-if="hseProblemForm.rectVideo != '' && videoFlag1 == false"
                    :src="hseProblemForm.rectVideo"
                    class="avatar video-avatar"
                    controls="controls"
                  >
                    您的浏览器不支持视频播放
                  </video>
                  <i
                    v-if="hseProblemForm.rectVideo == '' && videoFlag1 == false"
                  ></i>
                </el-card>
                <!-- <video src="hseProblemForm.rectVideo" controls="controls" preload="preload">您的浏览器不支持视频播放</video> -->
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col>
              <!-- 需要修改 -->
              <el-form-item label="整改描述：">{{
                hseProblemForm.rectDescription
              }}</el-form-item>
            </el-col>
            <!-- 相关文件处理 -->
            <el-col>
              <el-form-item label="相关文件：">
                <a :href="rectFile" target="_blank">
                  <!-- <i class="el-icon-document" style="font-size: 30px"></i> -->
                  {{rectFile}}
                </a>
                <!-- <el-button
                  class="icon"
                  round
                  size="mini"
                  icon="el-icon-download"
                  @click="downLoad()"
                ></el-button> -->
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 验证内容 -->
          <el-divider>验证内容</el-divider>

          <el-row>
            <el-col :span="12">
              <el-form-item label="验证人："
                >{{ verifyName.name }}
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="验证时间：" prop="auditTime">
                <el-date-picker
                  v-model="updataForm.auditTime"
                  type="date"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  placeholder="请选择验证日期"
                  style="width: 80%"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="整改效果" prop="recordStatus">
                <el-select
                  v-model="updataForm.recordStatus"
                  style="width: 50%"
                  placeholder="请选择整改效果"
                  clearable
                >
                  <el-option
                    v-for="item in rectificationEffectOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.name"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row class="buttons">
            <el-form-item>
              <el-button type="primary" @click="verifySubmit('updataForm')"
                >确定</el-button
              >
              <el-button
                type="danger"
                style="width: 100px"
                @click="$router.go(-1)"
                >取消</el-button
              >
            </el-form-item>
          </el-row>
        </el-form>
      </div>
    </el-card>

    <!-- 弹框区域 -->
    <el-dialog title="重新指定整改人" :visible.sync="dialogFormVisible">
      <el-form :model="ruleForm" :rules="rulesForm" ref="ruleForm">
        <el-form-item label="请重新选择整改人" prop="verifyPerson">
          <el-select
            v-model="ruleForm.verifyPerson"
            placeholder="请选择整改人"
            clearable
            filterable
            value-key="name"
          >
            <el-option
              v-for="item in verifyPersonOptions"
              :key="item.employeeID"
              :label="item.info"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm01('ruleForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import { GetQhseCheckRecord } from "../../../services/hseAudit_verify";
import { GetCurrentUser } from "../../../store/CurrentUser";
// import { UpdateQhseeCheckRecordStatus } from "../../../services/hseAudit_verify";
import { GetDictionary } from "../../../services/dictionary";
import { GetQhseLoginName } from "../../../services/hseAudit_verify";
import { PutUpdateCheckRecord } from "../../../services/hseAudit_verify";
// import { GetHSEAuditGroupMember } from "../../../services/hseAudit_verify";
import { GetverifyPersonInfo } from "../../../services/hseAudit_verify";
export default {
  data() {
    return {
      // 整改效果数据绑定
      rectificationEffect: {
        recordStatus: "",
      },
      hseProblemForm: {},
      //   验证内容中表单验证项
      updataForm: {
        recordStatus: "",
        auditTime: "",
        qhseeCheckRecordID: "",
      },
      // 查询检查问题参数
      queryCheckProblemParam: {
        audittime: "",
        round: "",
        companyCode: "",
      },
      // 校验规则
      rules: {
        recordStatus: [
          {
            required: true,
            message: "请选择整改效果",
            trigger: ["blur", "change"],
          },
        ],
        auditTime: [
          {
            type: "string",
            required: true,
            message: "请选择验证时间",
            trigger: ["blur", "change"],
          },
        ],
      },
      //   整改效果选项
      rectificationEffectOptions: [],
      rectFile:'',
      verifyName: "",
      // 弹出框显示与否
      dialogFormVisible: false,
      // 弹框验证项
      ruleForm: {
        verifyPerson: "",
      },
      rulesForm: {
        verifyPerson: [
          {
            required: true,
            message: "请选择整改人",
            trigger: ["blur", "change"],
          },
        ],
      },

      // 弹出框下拉选项
      verifyPersonOptions: [],
      // 弹出框内数据绑定
      personName: "",
      

      videoFlag1: false,
    };
  },
  computed: {
    currentUser() {
      return GetCurrentUser();
    },
  },
  mounted() {
    this.getHSEProblem();
    // this.queryQhseCheckRecord();
    this.getTime();
    this.getOption();
    this.getLoginName();
  },
  methods: {
    getHSEProblem() {
      console.log("query", this.$route.query.row);
      this.hseProblemForm = this.$route.query.row;
      console.log(7777, this.hseProblemForm);
      this.rectFile = this.hseProblemForm.rectFile;
      // console.log(369, this.rectFile);
      this.updataForm.qhseeCheckRecordID = this.hseProblemForm.qhseeCheckRecordID;
    },
    // 获取验证人姓名
    getLoginName() {
      GetQhseLoginName().then((res) => {
        this.verifyName = res.data;
        // console.log(1111, this.verifyName.name);
      });
    },
    //获取验证时间
    getTime() {
      let showDate = new Date();
      let seperator = "-";
      let year = showDate.getFullYear();
      let month = showDate.getMonth() + 1;
      var strDate = showDate.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 1 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      this.updataForm.auditTime =
        year + seperator + month + seperator + strDate;
    },

    // 点击“确定”事件
    verifySubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid && this.updataForm.recordStatus == "合格") {
          this.hseProblemForm.recordStatus = "已验证";
          this.hseProblemForm.verifyDate = this.updataForm.auditTime;
          this.hseProblemForm.verifyPersonEmpID = this.verifyName.employeeID;
          this.hseProblemForm.verifyPersonName = this.verifyName.name;
          this.hseProblemForm.rectEffect = "合格";

          PutUpdateCheckRecord(this.hseProblemForm).then((res) => {
            if (res.code == 1000) {
              this.$message.success("提交成功！");
              this.$router.go(-1); //返回上一url
            } else {
              this.$message.console.error("提交失败！");
            }
          });
          // console.log(123,this.hseProblemForm)
        } else if (valid && this.updataForm.recordStatus == "不合格") {
          this.dialogFormVisible = true;
          GetverifyPersonInfo().then((res) => {
            this.verifyPersonOptions = res.data;
          });
          // console.log(this.updataForm.recordStatus);
          // return false;
        }
      });
    },

    // 获取整改效果选项
    getOption() {
      // console.log("获取整改效果选项！")
      GetDictionary({ name: "整改结果" }).then((res) => {
        // console.log(777777,res.data)
        this.rectificationEffectOptions = res.data;
        // console.log(3, this.rectificationEffectOptions);
      });
    },

    // 弹出框“确定”事件处理
    submitForm01(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // console.log(this.ruleForm.verifyPerson);
          this.hseProblemForm.rectPersonName = this.ruleForm.verifyPerson.name;
          this.hseProblemForm.rectPersonID = this.ruleForm.verifyPerson.employeeID;
          // this.hseProblemForm.rectificationSuggestions = "";
          this.hseProblemForm.rectification = " ";
          this.hseProblemForm.rectAttach1 = " ";
          this.hseProblemForm.rectAttach2 = " ";
          this.hseProblemForm.rectAttach3 = " ";
          this.hseProblemForm.rectAttach4 = " ";
          this.hseProblemForm.rectVideo = " ";
          this.hseProblemForm.rectEffect = " ";
          this.hseProblemForm.rectVideo = " ";
          this.hseProblemForm.rectDescription = " ";
          this.hseProblemForm.rectFile = " ";
          this.hseProblemForm.education = " ";
          this.hseProblemForm.recordStatus = "管理员已审核";

          // // 提交数据
          PutUpdateCheckRecord(this.hseProblemForm).then((res) => {
            if (res.code == 1000) {
              this.$message.success("提交成功！");
              this.$router.go(-1); //返回上一url
            } else {
              this.$message.console.error("提交失败！");
            }
            // console.log(res)
          });
        } else {
          return false;
        }
      });
    },
    // 下载文件
    downLoad() {
      
      var url = this.rectFile;
      var iframe = document.createElement("iframe");
      iframe.style.display = "none";
      iframe.src = url;
      document.body.appendChild(iframe);
    },
  },
};
</script>

<style scoped>
.icon {
  margin-left: 20px;
}
</style>
